<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>A Centred Company</title>
  <link rel="stylesheet" href="styles.css" type="text/css" media="all" />
  <style>
  html, body {
  margin:0; padding:0;
  height:100%;
}

body {
  background:url('./images/back1.jpg') 50% 50% no-repeat #FC3;
  font-family:Georgia, Times, serifs;
}

#floater {
  position:relative; float:left;
  height:50%; margin-bottom:-200px;
  width:1px solid red;
}

#centered {
  position:relative; clear:left;
  height:400px; width:80%; max-width:800px; min-width:400px;
  margin:0 auto;
  background:#fff;
  border:4px solid #666;
}

#bottom {
  position:absolute;
  bottom:0; right:0;
}

#nav {
  position:absolute; left:0; top:0; bottom:0; right:70%;
  padding:20px; margin:10px;
}

#content {
  position:absolute; left:30%; right:0; top:0; bottom:0;
  overflow:auto; height:340px;
  padding:20px; margin:10px;
}
#nav ul {
  list-style:none;
  padding:0; margin:20px 0 0 0; text-indent:0;
}

#nav li {
  padding:0; margin:3px;
}

#nav li a {
  display:block; background-color:#e8e8e8;
  padding:7px; margin:0;
  text-decoration:none; color:#000;
  border-bottom:1px solid #bbb;
  text-align:right;
}

#nav li a::after {
  content:'\00BB'; color:#aaa; font-weight:bold;
  display:inline; float:right;
  margin:0 2px 0 5px;
}

#nav li a:hover, #nav li a:focus {
  background:#f8f8f8;
  border-bottom-color:#777;
}

#nav li a:hover::after {
  margin:0 0 0 7px; color:#f93;
}

#nav li a:active {
  padding:8px 7px 6px 7px;
}

#centered {
  -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
}

h1, h2, h3, h4, h5, h6 {
  font-family:Helvetica, Arial, sans-serif;
  font-weight:normal; color:#666;
}

h1 {
  color:#f93; border-bottom:1px solid #ddd;
  letter-spacing:-0.05em; font-weight:bold;
  margin-top:0; padding-top:0;
}

#bottom {
  padding:10px;
  font-size:0.7em;
  color:#f03;
}

#logo {
  font-size:2em; text-align:center;
  color:#999;
}

#logo strong {
  font-weight:normal;
}

#logo span {
  display:block;
  font-size:4em; line-height:0.7em;
  color:#666;
}

p, h2, h3 {
  line-height:1.6em;
}

a {
  color:#f03;
  </style>
</head>

<body>
  <div id="floater"></div>
  <div id="centered">

    <div id="side">
      <div id="logo"><strong><span>A</span> Company</strong></div>
      <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

    <div id="content">

      <h1>Page Title</h1>

      <p>
      Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. 
      Energistically simplify impactful niche markets via enabled imperatives. 
      Holisticly predominate premium innovation after compelling scenarios. 
      Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. 
      Distinctively syndicate standards compliant schemas before robust vortals. 
      Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information. 
      </p>

      <h2>Heading 2</h2>

      <p>
      Efficiently embrace customized web-readiness rather than customer directed processes. 
      Assertively grow cross-platform imperatives vis-a-vis proactive technologies. 
      Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. 
      Conveniently streamline competitive strategic theme areas with focused e-markets. 
      Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. 
      Appropriately reinvent holistic services before robust e-services. 
      </p>

    </div>

  </div>

  <div id="bottom">
    <p>
      Copyright notice goes here
    </p>
  </div>
</body>
</html>